<template>
  <div class="login-body">
    <!-- header -->
    <div class="login-box">
      <div class="login-title" @click="aaa">欢迎登录</div>
      <text-field ref="shopPhone" show type="number" placeholder="请输入手机号" />
      <text-field ref="shopPwd" type="password" placeholder="请输入密码" />
      <div class="btn_area"><mt-button type="primary" size="large" @click="login">登录</mt-button></div>
      <div v-if="canSelect" class="btn_area"><mt-button type="default" size="large" @click="popupVisible = true">切换账号</mt-button></div>
      <div class="btn_area"><mt-button type="primary" size="large" @click="register">注册新账号</mt-button></div>
    </div>

    <mt-popup v-model="popupVisible" position="bottom" class="mint-popup" style="width: 100%">
      <div style="background: #FFFFFF;padding: 10px;height: 30px;">
        <mt-button type="default" size="small" style="float: left" @click="popupVisible = false">取消</mt-button>
        <mt-button type="primary" size="small" style="float: right" @click="getUser()">确定</mt-button>
      </div>
      <div style="clear: both">
        <mt-picker :slots="slots" :show-toolbar="false" ref="picker" value-key="mobile"></mt-picker>
      </div>
    </mt-popup>
  </div>
</template>

<script>
import {Field, Indicator} from 'mint-ui';
import { Button } from 'mint-ui';
import request from '../utils/request.js';
import util from '../utils/util.js';
import { Toast } from 'mint-ui';
import { MessageBox } from 'mint-ui';
import field from '../components/field';

export default {
  components: {
    Field,
    Button,
    Toast,
    MessageBox,
    TextField: field,
  },
  data () {
    return {
      shopPhone: '',
      shopPwd: '',
      popupVisible: false,
      canSelect: false,
      code: "",
      slots: [
        {
          flex: 1,
          values: [""],
          className: 'slot1',
          textAlign: 'center'
        }
      ]
    };
  },
  async created() {
    let path = location.href;
    this.code = path.substring(path.indexOf("code=") + "code=".length, path.indexOf("&"));
    if(this.code.length == 32){
      const res = await request({code: this.code}, "/ajax/openid");
      if(res && res.code == 0){
        localStorage.setItem("openid", res.msg);
      }
    }
    setTimeout(()=>{
      let dataStr = localStorage.getItem("loginUser");
      if(dataStr && dataStr.length > 0) {
        let user = JSON.parse(dataStr);
        if(!(user instanceof Array)){
            user = [user];
        }
        this.$refs.shopPhone.val = user[0].mobile;
        this.$refs.shopPwd.val = user[0].password;
        if(user.length > 1){
          this.canSelect = true;
          this.$refs.picker.setSlotValues(0, user);
        }
      }
    }, 10);
  },
  methods: {
    aaa() {
      //window.location.href = "/ajax/pay?id=23";
    },
    register() {
      this.$router.push({
        path: '/register',
      });
    },
    login() {
      const mobile = this.$refs.shopPhone.val;
      const password = this.$refs.shopPwd.val;
      if(!mobile || !password) {
        util.toast("账号或密码不能为空!");
        return;
      }
      if(!util.checkMobile(mobile)) {
        util.toast("清输入格式正确的手机号!");
        return;
      }
      let data = {mobile:mobile, password:password};
      request(data, "/ajax/login").then(res => {
        if(util.warnFunc(res)) return;
        if(res.code == 0){
          let dataStr = localStorage.getItem("loginUser");
          let userArr = [];
          if(dataStr && dataStr.length > 0) {
            userArr = JSON.parse(dataStr);
            if(userArr instanceof Array){
              if(userArr.filter((u)=>u.mobile == data.mobile).length == 0){
                userArr.push(data);
              }
            }else{
              userArr = [userArr];
            }
          }else{
            userArr.push(data);
          }
          localStorage.setItem("loginToken", res.msg);
          localStorage.setItem("loginUser", JSON.stringify(userArr));
          this.$router.push({
            path: '/',
          });
        }
      });
    },
    getUser() {
      let user = this.$refs.picker.getSlotValue(0);
      this.$refs.shopPhone.val = user.mobile;
      this.$refs.shopPwd.val = user.password;
      this.popupVisible = false;
    },
    close() {
      alert('close');
    }
  },
}

</script>

<style scoped>
.login-body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.login-box {
  width: 80%;
  border-radius: 5px;
}
.login-title {
  text-align: left;
  padding: 10px 0;
  font-size: 28px;
  margin-bottom: 40px;
}
.btn_area {
  margin-top: 30px;
}
</style>
